<template>
  <div class="settings-container">
    <div class="header">
      <h1>会议设置</h1>
    </div>
    
    <div class="content">
      <div class="settings-sections">
        <div class="settings-section">
          <h3>基本设置</h3>
          <div class="settings-form">
            <a-form layout="vertical">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="会议室名称">
                    <a-input v-model:value="settings.roomName" placeholder="请输入会议室名称" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="最大参与人数">
                    <a-input-number v-model:value="settings.maxParticipants" :min="1" :max="100" style="width: 100%" />
                  </a-form-item>
                </a-col>
              </a-row>
              
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="会议时长（分钟）">
                    <a-input-number v-model:value="settings.duration" :min="15" :max="480" style="width: 100%" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="会议密码">
                    <a-input-password v-model:value="settings.password" placeholder="请输入会议密码" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
        
        <div class="settings-section">
          <h3>音视频设置</h3>
          <div class="settings-form">
            <a-form layout="vertical">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="默认摄像头">
                    <a-select v-model:value="settings.defaultCamera" placeholder="选择默认摄像头">
                      <a-select-option value="camera1">内置摄像头</a-select-option>
                      <a-select-option value="camera2">外接摄像头</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="默认麦克风">
                    <a-select v-model:value="settings.defaultMicrophone" placeholder="选择默认麦克风">
                      <a-select-option value="mic1">内置麦克风</a-select-option>
                      <a-select-option value="mic2">外接麦克风</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              
              <a-row :gutter="24">
                <a-col :span="24">
                  <a-form-item>
                    <a-checkbox v-model:checked="settings.autoMute">加入会议时自动静音</a-checkbox>
                  </a-form-item>
                  <a-form-item>
                    <a-checkbox v-model:checked="settings.autoVideo">加入会议时自动开启视频</a-checkbox>
                  </a-form-item>
                  <a-form-item>
                    <a-checkbox v-model:checked="settings.recordMeeting">自动录制会议</a-checkbox>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
        
        <div class="settings-section">
          <h3>通知设置</h3>
          <div class="settings-form">
            <a-form layout="vertical">
              <a-row :gutter="24">
                <a-col :span="24">
                  <a-form-item>
                    <a-checkbox v-model:checked="settings.emailNotification">邮件通知</a-checkbox>
                  </a-form-item>
                  <a-form-item>
                    <a-checkbox v-model:checked="settings.desktopNotification">桌面通知</a-checkbox>
                  </a-form-item>
                  <a-form-item>
                    <a-checkbox v-model:checked="settings.soundNotification">声音提醒</a-checkbox>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
        
        <div class="settings-actions">
          <a-button type="primary" @click="saveSettings" :loading="saving">
            {{ saving ? '保存中...' : '保存设置' }}
          </a-button>
          <a-button style="margin-left: 8px" @click="resetSettings">
            重置为默认
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

const saving = ref(false)

const settings = reactive({
  roomName: '技术讨论会议室',
  maxParticipants: 10,
  duration: 60,
  password: '',
  defaultCamera: 'camera1',
  defaultMicrophone: 'mic1',
  autoMute: true,
  autoVideo: false,
  recordMeeting: false,
  emailNotification: true,
  desktopNotification: true,
  soundNotification: false
})

const saveSettings = async () => {
  saving.value = true
  
  // 模拟保存过程
  setTimeout(() => {
    saving.value = false
    message.success('设置保存成功')
  }, 1500)
}

const resetSettings = () => {
  Object.assign(settings, {
    roomName: '技术讨论会议室',
    maxParticipants: 10,
    duration: 60,
    password: '',
    defaultCamera: 'camera1',
    defaultMicrophone: 'mic1',
    autoMute: true,
    autoVideo: false,
    recordMeeting: false,
    emailNotification: true,
    desktopNotification: true,
    soundNotification: false
  })
  message.info('设置已重置为默认值')
}
</script>

<style scoped>
.settings-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.settings-sections {
  max-width: 800px;
}

.settings-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.settings-section h3 {
  color: #262626;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.settings-form {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.settings-actions {
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  text-align: center;
}
</style>